<!--
 * @Description:自定义滚动文字
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-09 22:50:17
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>自定义滚动文字</title>
	<style>
		#parent {
			width: 600px;
			height: 20px;
			background: #ccc;
			position: relative;
			margin: 0 auto;
		}

		#div1 {
			width: 20px;
			height: 20px;
			background: red;
			position: absolute;
			left: 0;
			top: 0;
		}

		#div2 {
			width: 300px;
			height: 300px;
			background: green;
			/* opacity: .3; */
			position: relative;
			overflow: hidden;
		}
		#div3 {
			position: absolute;
			left: 0;
			top: 0;
			padding: 4px;
		}
	</style>
	<script>
		window.onload = function () {
			var odiv = document.getElementById("div1")
			var odiv2 = document.getElementById("div2")
			var odiv3 = document.getElementById("div3")
			var oparent = document.getElementById("parent")
			var disX = 0;
			var disY = 0;
			odiv.onmousedown = function (ev) {
				var oEvent = ev || event;
				disX = oEvent.clientX - odiv.offsetLeft;
				// disY = oEvent.clientY - odiv.offsetTop;
				document.onmousemove = function (ev) {
					var oEvent = ev || event;
					// i t 是鼠标距离div的内部距离
					var i = oEvent.clientX - disX
					// var t = oEvent.clientY - disY
					if (i < 0) {
						i = 0
					} else if (i > oparent.offsetWidth - odiv.offsetWidth) {
						i = oparent.offsetWidth - odiv.offsetWidth
					}
					odiv.style.left = i + 'px';
					var scale = i / (oparent.offsetWidth - odiv.offsetWidth)
					console.log(i)
					console.log(scale)
					// odiv2.style.width = 400 * scale + 'px'
					// odiv2.style.height = 400 * scale + 'px'
					// odiv2.style.opacity = scale
					odiv3.style.top=-scale*(odiv3.offsetHeight-odiv2.offsetHeight)+'px'
				}
				document.onmouseup = function () {
					document.onmousemove = null
					document.onmouseup = null
				}
				return false;
			}
		}
	</script>
</head>

<body>
	<div id="parent">
		<div id="div1"></div>
	</div>
	<div id="div2">
		<div id="div3">
			文豪身份 扑朔迷离

			她在图书馆拾获一本《忒修斯之船》，作者石察卡身份成谜，据译者柯岱拉描述，他尚未写完便人间蒸发，生死未卜，留给世人一宗悬案。有人用铅笔写下批注，追寻石察卡真相，她也忍不住拿起笔加入讨论。

			文字谜题 真实冒险

			书里，失忆的男人被掳上一艘神秘的船，怪异的船员带着他进行毫无目的地却又屡屡预示他命运的航行；书外，石察卡笔下的每一桩背叛、争斗、屠杀都在真实世界中一一发生，而柯岱拉看似颠三倒四、漏洞百出的译注，竟也个个暗藏玄机。

			字里行间 杀机重重

			两人交换批注，资料越积越多，也越来越走进彼此内心。当他们以为终于快要接近真相，竟发现第三人笔迹，书中人物、作家命运，连同两人的生死，早已一起卷入迷局之中。

			《S.》 包含精装古书《忒修斯之船》和23个材质各异的附件，这是两人穿越时空留下的第一手资料，也是你参与这一趟冒险的重要线索。这是一场超越纸书界...
			文豪身份 扑朔迷离

			她在图书馆拾获一本《忒修斯之船》，作者石察卡身份成谜，据译者柯岱拉描述，他尚未写完便人间蒸发，生死未卜，留给世人一宗悬案。有人用铅笔写下批注，追寻石察卡真相，她也忍不住拿起笔加入讨论。

			文字谜题 真实冒险

			书里，失忆的男人被掳上一艘神秘的船，怪异的船员带着他进行毫无目的地却又屡屡预示他命运的航行；书外，石察卡笔下的每一桩背叛、争斗、屠杀都在真实世界中一一发生，而柯岱拉看似颠三倒四、漏洞百出的译注，竟也个个暗藏玄机。

			字里行间 杀机重重

			两人交换批注，资料越积越多，也越来越走进彼此内心。当他们以为终于快要接近真相，竟发现第三人笔迹，书中人物、作家命运，连同两人的生死，早已一起卷入迷局之中。

			《S.》 包含精装古书《忒修斯之船》和23个材质各异的附件，这是两人穿越时空留下的第一手资料，也是你参与这一趟冒险的重要线索。这是一场超越纸书界限的极致阅读，你将成为悬疑事件的一分子，和两人一同揭开文坛最危险的秘密。

			爱书的人啊，尽情坠落吧……
		</div>
	</div>
	</div>
</body>

</html>